//组件式实现条件渲染

import { render } from "@testing-library/react";
import React from "react";
import { Component, res } from "react";

class DemoA extends Component {
    constructor(props) {
        super(props)
        this.state = {
            flag: true
            //类似v-if  设置状态是否隐藏
        }
    }

    render() {
        let { flag } = this.state;
        return (
            <div>
                <h2>类组件 </h2>
                <hr />

                {flag && <h2  >我是第一个标签</h2>}
                {/* vue中有一个v-show，是通过display控制显示与隐藏的，使用react实现 */}
                <h2 style={{ display: (flag ? 'block' : 'none') }} >我是标签</h2>
                <button onClick={() => this.setState(_ => ({ flag: !_.flag }))} >点击隐藏 </button>
            </div >
        )
    }
}
export default DemoA;
